import { memo, useEffect, useState } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useScroll } from 'ahooks';
import QueueAnim from 'rc-queue-anim';
import HomeInputSearch from '@/pages/Home/components/HomeInputSearch';
import AppLogo from '@/pages/Layout/components/Logo';

const HomeTop: FC<PropsWithChildren<{}>> = () => {
  const [show, setShow] = useState(false);
  const scroll = useScroll(document);
  useEffect(() => {
    if (!show && scroll && scroll.top > 400) {
      setShow(!show);
    }
    if (show && scroll && scroll.top <= 400) {
      setShow(!show);
    }
  }, [scroll]);
  return (
    <QueueAnim
      component={'div'}
      type={'top'}
      className={'fixed top-0 left-0 right-0 z-[100]'}
    >
      {show ? (
        <div className={'bg-white'} key={'homeTop'}>
          <div
            className={
              ' max-w-[1200px]  space-x-5 m-auto flex items-center justify-center h-[55px]'
            }
          >
            <AppLogo />
            <HomeInputSearch />
          </div>
        </div>
      ) : null}
    </QueueAnim>
  );
};

export default memo(HomeTop);
